<template>
    <el-row class="home" :gutter="20" style="padding-top: 20px">

        <el-tabs type="border-card">
            <el-tab-pane label="全部">
                <el-card >
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="名称"
                                prop="name"
                                width="200"
                                align="center"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="作者"
                                width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="创建时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="endTime"
                                label="结束时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="状态"
                                align="center"
                                width="120"
                                prop="status">
                            <!--状态-->
                            <template slot-scope="scope">
                                <el-alert v-if="scope.row.status == 0" title="禁止" type="success" :closable="false" effect="dark"></el-alert>
                                <el-alert v-if="scope.row.status == 1" title="一直可用" type="success" :closable="false" effect="dark"></el-alert>
                                <el-alert v-if="scope.row.status == 2" title="启用" type="success" :closable="false" effect="dark"></el-alert>
                            </template>
                            <!--状态-->
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button @click="enterQuestion(scope.row)" type="primary" icon="el-icon-search" size="small">查看</el-button>
                                <el-button v-if="role == '2'" @click="deleteCollection(scope.row)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>


            <el-tab-pane label="我的" v-if="role == '1'">
                <el-card >
                    <div style="margin-top: 10px;margin-bottom: 5px">
                        <el-button @click="dialogFormVisible = true" type="success" plain>新增</el-button>

                        <!--新增弹窗开始-->
                        <el-dialog title="新增题目集" :visible.sync="dialogFormVisible">
                            <el-form :model="collectionForm" ref="collectionFormRef">
                                <el-form-item label="名称" :label-width="formLabelWidth">
                                    <el-input v-model="collectionForm.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="结束时间" :label-width="formLabelWidth">
                                    <div class="block">
                                        <el-date-picker
                                                v-model="collectionForm.endTime"
                                                type="date"
                                                placeholder="选择结束日期"
                                                format="yyyy 年 MM 月 dd 日">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                                <el-form-item label="是否启用" :label-width="formLabelWidth">
                                    <el-switch v-model="collectionForm.status" active-color="#13ce66"></el-switch>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="addQCollection('collectionFormRef')">确 定</el-button>
                            </div>
                        </el-dialog>
                        <!--新增弹窗结束-->

                        <el-button @click="toggleSelection()" type="warning" plain>取消</el-button>
                        <el-button @click="deleteCollection()" type="danger" plain>批量删除</el-button>
                    </div>
                    <el-table
                            ref="multipleTable"
                            :data="myTableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="indexChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="名称"
                                prop="name"
                                width="200"
                                align="center"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="作者"
                                width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="创建时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="endTime"
                                label="结束时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="状态"
                                align="center"
                                width="120"
                                prop="status">

                            <!--状态-->
                            <template slot-scope="scope">
                                <el-alert v-if="scope.row.status == 0" title="禁止" type="success" :closable="false" effect="dark"></el-alert>
                                <el-alert v-if="scope.row.status == 1" title="一直可用" type="success" :closable="false" effect="dark"></el-alert>
                                <el-alert v-if="scope.row.status == 2" title="启用" type="success" :closable="false" effect="dark"></el-alert>
                            </template>
                            <!--状态-->

                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-tooltip content="查看" placement="bottom" visible-arrow="false">
                                    <el-button @click="enterQuestion(scope.row)" type="primary" icon="el-icon-search" size="small"></el-button>
                                </el-tooltip>
                                <el-tooltip content="编辑" placement="bottom" visible-arrow="false">
                                    <el-button @click="updateClick(scope.row)" type="success" icon="el-icon-edit" size="small"></el-button>
                                </el-tooltip>

                                <!--编辑弹窗开始-->
                                <el-dialog title="编辑题目集" :visible.sync="updateDialogVisible">
                                    <el-form :model="collectionForm" ref="updateFormRef">
                                        <el-form-item label="名称" :label-width="formLabelWidth">
                                            <el-input v-model="collectionForm.name" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="结束时间" :label-width="formLabelWidth">
                                            <div class="block">
                                                <el-date-picker
                                                        v-model="collectionForm.endTime"
                                                        type="date"
                                                        placeholder="选择结束日期"
                                                        format="yyyy 年 MM 月 dd 日">
                                                </el-date-picker>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="是否启用" :label-width="formLabelWidth">
                                            <el-switch v-model="collectionForm.status" active-color="#13ce66"></el-switch>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="updateDialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="updateCollection('updateFormRef')">确 定</el-button>
                                    </div>
                                </el-dialog>
                                <!--编辑弹窗结束-->

                                <el-tooltip content="删除" placement="bottom" visible-arrow="false">
                                    <el-button @click="deleteCollection(scope.row)" type="danger" icon="el-icon-delete" size="small"></el-button>
                                </el-tooltip>
                            </template>

                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </el-row>
</template>

<script>
    //axios
    import axios from 'axios'

    export default {
        name: "",
        data(){
            return {
                tableData: [],
                myTableData:[],
                multipleSelection: [],
                activeName: 'all',
                dialogFormVisible: false,
                updateDialogVisible: false,
                collectionForm:{
                    id: '',
                    name: '',
                    author: '',
                    createTime: '',
                    endTime: '',
                    status: true
                },
                formLabelWidth: '120px',
                ids: '', //当前选框选中的值的id，&连接
                token: '',
                role: ''
            }
        },
        methods: {
            toggleSelection(rows) {
                this.$refs.multipleTable.clearSelection();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick(row) {
                console.log(row);
            },

            //新增题目集
            addQCollection(formName){
                //关闭弹窗
                this.dialogFormVisible = false;

                //发送请求
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        //修改状态值
                        this.collectionForm.status = (this.collectionForm.status == true) ? 1 : 0;
                        let params = this.collectionForm;
                        var that = this;

                        //发送请求
                        /*
                            接口: 新增题目集
                            请求地址: http://localhost:8881/producer/qcollection/add
                            请求方法: post
                            请求参数: 题目信息
                            响应内容: 响应结果
                        */
                        axios({
                            method: 'post',
                            url: 'http://localhost:8881/producer/qcollection/add',
                            data: params,
                            headers:{token: this.token}
                        }).then(function (response) {
                            var res = response.data;
                            if(res.code == 200){
                                that.$message.success('新增成功！');
                                //跳转页面
                                //that.$router.push('/home')
                            }else{
                                that.$message.error('新增失败！');
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        return false
                    }
                });
            },

            //当前选中值的id
            indexChange(sels){
                this.ids = '';
                var ids = sels.map(it=>it.id);
                for(var i = 0; i < ids.length; i++){
                    this.ids = (i == 0) ? this.ids + ids[i] : this.ids + '&' + ids[i];
                }
            },

            //删除题目集
            deleteCollection(data){
                //发送请求
                var that = this;
                if(this.ids == '' && data != null){
                    this.ids = data.id;
                }

                //发送请求
                /*
                    接口: 删除题目集
                    请求地址: http://localhost:8881/producer/qcollection/delete
                    请求方法: get
                    请求参数: id，使用&连接
                    响应内容: 响应结果
                */
                axios({
                    method: 'get',
                    url: 'http://localhost:8881/producer/qcollection/delete',
                    params: {
                        ids: this.ids
                    },
                    headers:{token: this.token}
                }).then(function (response) {
                    var res = response.data;
                    if(res.code == 200){
                        that.$message.success('删除成功！');
                        //跳转页面
                        //that.$router.push('/home')
                    }else{
                        that.$message.error('删除失败！');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },

            //选中编辑
            updateClick(data){
                this.collectionForm = data;
                this.collectionForm.status = (data.status == 1) ? true : false;
                this.updateDialogVisible = true;
            },

            //编辑题目集
            updateCollection(formName){
                //关闭弹窗
                this.updateDialogVisible = false;

                //发送请求
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        //修改状态值
                        this.collectionForm.status = (this.collectionForm.status == true) ? 1 : 0;
                        let params = this.collectionForm;
                        var that = this;

                        //发送请求
                        /*
                            接口: 编辑题目集
                            请求地址: http://localhost:8881/producer/qcollection/update
                            请求方法: post
                            请求参数: 题目信息
                            响应内容: 响应结果
                        */
                        axios({
                            method: 'post',
                            url: 'http://localhost:8881/producer/qcollection/update',
                            data: params,
                            headers:{token: this.token}
                        }).then(function (response) {
                            var res = response.data;
                            if(res.code == 200){
                                that.$message.success('修改成功！');
                                //跳转页面
                                //that.$router.push('/home')
                            }else{
                                that.$message.error('修改失败！');
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        return false
                    }
                });
            },

            //进入题目页面
            enterQuestion(data){
                //获取题目集id
                var collectionId = data.id;
                //跳转到对应的题目页面
                this.$router.push({
                    path: '/admin/problem/manage',
                    query: {id: collectionId}
                })
            }
        },
        created: function () {
            //初始化表格数据
            let params = {};
            var that = this;
            var token = localStorage.getItem("token");
            this.token = token;

            this.role = localStorage.getItem("role");

            //发送请求
            /*
                接口: 获取全部题目集
                请求地址: http://localhost:8881/producer/qcollection/select
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/qcollection/select',
                data: params,
                headers: {token: token}
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.tableData = res.data.collectionList;
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });

            //发送请求
            /*
                接口: 获取我的题目集
                请求地址: http://localhost:8881/producer/qcollection/select/my
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/qcollection/select/my',
                data: params,
                headers: {token: token}
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.myTableData = res.data.collectionList;
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

<style scoped>
    .up-box, .down-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>